<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.23</title>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="400" style="background-color: #FFFFFF;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round'; // Gives a softer, hand-drawn look

        // --- Draw Circuit Lines and Shapes ---
        ctx.beginPath();

        // Coordinates
        const x_batt = 100;
        const y_top = 100;
        const y_bottom = 300;
        const x_r1_start = 280;
        const x_r1_end = 380;
        const x_junction = 420;
        const x_l = 420;
        const x_r2 = 520;

        // Voltage Source (V)
        ctx.moveTo(x_batt, y_bottom);
        ctx.lineTo(x_batt, 215);
        // Negative terminal
        ctx.moveTo(x_batt - 20, 205);
        ctx.lineTo(x_batt + 20, 205);
        // Positive terminal
        ctx.moveTo(x_batt - 30, 185);
        ctx.lineTo(x_batt + 30, 185);
        ctx.moveTo(x_batt, 175);
        ctx.lineTo(x_batt, y_top);

        // Switch
        ctx.moveTo(x_batt, y_top);
        ctx.lineTo(170, y_top);
        ctx.moveTo(170, y_top);
        ctx.lineTo(230, y_top - 20); // Open switch arm
        // Wire from other side of switch
        ctx.moveTo(250, y_top);

        // Resistor R1
        ctx.lineTo(x_r1_start, y_top);
        let zig_h = 10;
        ctx.moveTo(x_r1_start, y_top);
        ctx.lineTo(x_r1_start + 10, y_top + zig_h);
        ctx.lineTo(x_r1_start + 30, y_top - zig_h);
        ctx.lineTo(x_r1_start + 50, y_top + zig_h);
        ctx.lineTo(x_r1_start + 70, y_top - zig_h);
        ctx.lineTo(x_r1_start + 90, y_top + zig_h);
        ctx.lineTo(x_r1_end, y_top);
        ctx.lineTo(x_junction, y_top);

        // Top wire of parallel branches
        ctx.moveTo(x_junction, y_top);
        ctx.lineTo(x_r2, y_top);

        // Left branch (Inductor L)
        ctx.moveTo(x_l, y_top);
        const y_l_start = y_top + 40;
        const y_l_end = y_bottom - 60;
        ctx.lineTo(x_l, y_l_start);
        // Draw coil
        let num_coils = 4;
        let coil_h = (y_l_end - y_l_start) / num_coils;
        let coil_r = 15;
        for (let i = 0; i < num_coils; i++) {
            ctx.arc(x_l, y_l_start + coil_h * i + coil_h / 2, coil_r, 1.5 * Math.PI, 0.5 * Math.PI, true);
        }
        ctx.moveTo(x_l, y_l_end);
        ctx.lineTo(x_l, y_bottom);

        // Right branch (Resistor R2)
        ctx.moveTo(x_r2, y_top);
        ctx.lineTo(x_r2, y_top + 20);
        let zig_w = 10;
        ctx.moveTo(x_r2, y_top + 20);
        ctx.lineTo(x_r2 + zig_w, y_top + 45);
        ctx.lineTo(x_r2 - zig_w, y_top + 75);
        ctx.lineTo(x_r2 + zig_w, y_top + 105);
        ctx.lineTo(x_r2 - zig_w, y_top + 135);
        ctx.lineTo(x_r2 + zig_w, y_top + 165);
        ctx.lineTo(x_r2, y_top + 190);
        ctx.lineTo(x_r2, y_bottom);

        // Bottom Wire
        ctx.moveTo(x_batt, y_bottom);
        ctx.lineTo(x_r2, y_bottom);

        // Apply stroke to all paths drawn
        ctx.stroke();

        // Draw filled circles for switch contacts
        ctx.beginPath();
        ctx.arc(170, y_top, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(250, y_top, 4, 0, 2 * Math.PI);
        ctx.fill();

        // --- Text Labels ---
        const mainFont = '24px "Comic Sans MS", cursive, sans-serif';
        const valFont = '22px "Comic Sans MS", cursive, sans-serif';
        const subFont = '16px "Comic Sans MS", cursive, sans-serif';

        ctx.textAlign = 'left';

        // Component labels on diagram
        ctx.font = mainFont;
        ctx.fillText('V', x_batt - 50, 200);
        ctx.fillText('+', x_batt + 35, 188);
        ctx.fillText('-', x_batt + 35, 208);
        ctx.fillText('L', x_l + 25, 200);

        // R1 label
        ctx.font = mainFont;
        ctx.fillText('R', (x_r1_start + x_r1_end) / 2 - 10, y_top - 25);
        ctx.font = subFont;
        ctx.fillText('1', (x_r1_start + x_r1_end) / 2 + 7, y_top - 20);

        // R2 label
        ctx.font = mainFont;
        ctx.fillText('R', x_r2 + 20, (y_top + y_bottom) / 2);
        ctx.font = subFont;
        ctx.fillText('2', x_r2 + 20 + 18, (y_top + y_bottom) / 2 + 5);

        // List of values
        const textX = 170;
        const textY = 160;
        const dY = 30;
        ctx.font = valFont;

        ctx.fillText('V = 100 V', textX, textY);

        // R1 value
        ctx.fillText('R', textX, textY + dY);
        ctx.font = subFont;
        ctx.fillText('1', textX + 15, textY + dY + 5);
        ctx.font = valFont;
        ctx.fillText('= 10 \u03A9', textX + 25, textY + dY);

        // R2 value
        ctx.fillText('R', textX, textY + 2 * dY);
        ctx.font = subFont;
        ctx.fillText('2', textX + 15, textY + 2 * dY + 5);
        ctx.font = valFont;
        ctx.fillText('= 100 \u03A9', textX + 25, textY + 2 * dY);

        // L value
        ctx.fillText('L = 10 H', textX, textY + 3 * dY);

        // Figure caption
        ctx.font = valFont;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.23', canvas.width / 2, 370);
    </script>
</body>
</html>